import React, { Component } from "react";
import { NavBar, Input, Button, Divider, Toast } from "antd-mobile";
import "./index.less";
import axios from 'axios';

export default class Login extends Component {
    state = {
        phone: '',
        code: ''
    }

    render() {
        return (
            <div className="login-container">
                {/* 顶部导航 start */}
                <NavBar back={null}>手机验证码登录</NavBar>
                {/* 顶部导航 end */}
                {/* 表单部分 start */}
                <div className="form">
                    {/* 手机号 */}
                    <div className="phone">
                        <Input
                            placeholder=""
                            value={this.state.phone}
                            onChange={this.saveData('phone')}
                            clearable={true}
                        />
                    </div>
                    <div className="h-20"></div>
                    {/* 验证码 */}
                    <div className="code">
                        <Input
                            placeholder=""
                            value={this.state.code}
                            onChange={this.saveData('code')}
                            clearable={true}
                        />
                        <Button size="small" onClick={this.getCode}>
                            获取验证码
                        </Button>
                    </div>
                    <div className="h-20"></div>
                    <div className="h-20"></div>
                    {/* 按钮 */}
                    <div className="button">
                        <Button block color="danger" size="large" onClick={this.login}>
                            登录
                        </Button>
                    </div>
                </div>
                {/* 表单部分 end */}

                {/* 其他登录 start */}
                <div className="other-login">
                    <div className="line">
                        <Divider
                            style={{
                                borderColor: "black",
                            }}
                        >
                            其他登录方式
                        </Divider>
                    </div>
                    <div className="h-20"></div>
                    <div className="icon">
                        <img src="/images/github.png" alt="" />
                        <img src="/images/qq.png" alt="" />
                        <img src="/images/wechat.png" alt="" />
                    </div>
                </div>
                {/* 其他登录 end */}
                <div className="h-20"></div>
                <div className="h-20"></div>
                <div className="h-20"></div>
                {/* 政策提示  */}
                <div className="remind">
                    未注册的手机号, 验证后会自动创建硅谷账号, 登录即代表您同意
                    《硅谷隐私政策》
                </div>
            </div>
        );
    }

    saveData = (type) => {
        return (v) => {
            // console.log(v);// e.target.value
            this.setState({
                [type]: v
            })
        }    
    }

    //点击获取验证码
    getCode = async () => {
        //获取用户输入的手机号
        let {phone} = this.state;
        //判断
        let reg = /^1\d{10}$/; // 简易的手机号正则表达式
        //如果输入失败
        if (!reg.test(phone)) {
            return Toast.show({
                icon: "fail",
                content: "手机号格式错误",
            });
        }
        //发送AJAX请求
        let result = await axios.post('/login/digits', {
            phone: phone
        });

        //判断  响应体
        if(result.data.code === 20000){
            return Toast.show({
                icon: "success",
                content: result.data.message
            });
        }

    };


    //点击登录  
    login = async () => {
        //获取手机号和验证码
        let {phone, code} = this.state;
        //发送请求
        let result = await axios.post('/login/phone', {
            phone, code
        });
        //获取结果
        //判断
        if(result.data.code === 20000){
            Toast.show({
                icon: "success",
                content: "登录成功",
            });
            //跳转至个人中心页面
            this.props.history.push('/usercenter');
        }else{
            return Toast.show({
                icon: "fail",
                content: "登录失败",
            });
        }

    }
    
}


